/* Common loading styles */

.loading-con {
    position: fixed;
    min-width: rem(100);
    height: rem(100);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: rgba(0, 0, 0, .4);
    border-radius: rem(10);
    display: inline-block;
    text-align: center;
    .slot_text {
        font-size: rem(12);
        display: inline-block;
        color: white;
        padding: rem(60) rem(20) 0;
        white-space: nowrap;
    }
    /**ball-clip-rotate-pulse*/
    .ball-clip-rotate-pulse {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .ball-clip-rotate-pulse>div {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
    }
    .ball-clip-rotate-pulse>div:first-child {
        background: #fff;
        height: rem(12);
        width: rem(12);
        -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    }
    .ball-clip-rotate-pulse>div:last-child {
        border: rem(2) solid #fff;
        width: rem(30);
        height: rem(30);
        margin: rem(-15) rem(-15);
        background: transparent;
        border: rem(2) solid;
        border-color: #fff transparent #fff transparent;
        -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
    }
    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
        }
    }
    /**ball-clip-rotate-multiple*/
    .ball-clip-rotate-multiple {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .ball-clip-rotate-multiple>div {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute;
        border: 2px solid #fff;
        border-bottom-color: transparent;
        border-top-color: transparent;
        border-radius: 100%;
        height: rem(36);
        width: rem(36);
        top: 40%;
        left: 50%;
        margin: rem(-18) 0 0 rem(-18);
        transform: translate(-50%, -50%);
        -webkit-animation: rotate 1s 0s ease-in-out infinite;
        animation: rotate 1s 0s ease-in-out infinite;
    }
    .ball-clip-rotate-multiple>div:last-child {
        display: inline-block;
        width: rem(16);
        height: rem(16);
        margin: rem(-8) 0 0 rem(-8);
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        border-color: #fff transparent #fff transparent;
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }
    @-webkit-keyframes ball-scale-ripple {
        0% {
            -webkit-transform: scale(0.1);
            transform: scale(0.1);
            opacity: 1;
        }
        70% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0.7;
        }
        100% {
            opacity: 0.0;
        }
    }
    @keyframes ball-scale-ripple {
        0% {
            -webkit-transform: scale(0.1);
            transform: scale(0.1);
            opacity: 1;
        }
        70% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0.7;
        }
        100% {
            opacity: 0.0;
        }
    }
    /*ball-triangle-path*/
    @keyframes ball-triangle-path-1 {
        33% {
            -webkit-transform: translate(rem(20), rem(-40));
            transform: translate(rem(20), rem(-40));
        }
        66% {
            -webkit-transform: translate(rem(40), 0px);
            transform: translate(rem(40), 0px);
        }
        100% {
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }
    }
    @keyframes ball-triangle-path-2 {
        33% {
            -webkit-transform: translate(rem(20), rem(40));
            transform: translate(rem(20), rem(40));
        }
        66% {
            -webkit-transform: translate(rem(-25), rem(40));
            transform: translate(rem(-25), rem(40));
        }
        100% {
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }
    }
    @keyframes ball-triangle-path-3 {
        33% {
            -webkit-transform: translate(rem(-40), 0px);
            transform: translate(rem(-40), 0px);
        }
        66% {
            -webkit-transform: translate(rem(-25), rem(-40));
            transform: translate(rem(-25), rem(-40));
        }
        100% {
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }
    }
    .ball-triangle-path {
        position: absolute;
        top: 10%;
        left: 25%;
    }
    .ball-triangle-path>div:nth-child(1) {
        animation: ball-triangle-path-1 2s ease-in-out 0s infinite;
    }
    .ball-triangle-path>div:nth-child(2) {
        animation: ball-triangle-path-2 2s ease-in-out 0s infinite;
    }
    .ball-triangle-path>div:nth-child(3) {
        animation: ball-triangle-path-3 2s ease-in-out 0s infinite;
    }
    .ball-triangle-path>div {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute;
        width: rem(8);
        height: rem(8);
        border-radius: 100%;
        border: 1px solid #fff;
    }
    .ball-triangle-path>div:nth-of-type(1) {
        top: rem(40);
    }
    .ball-triangle-path>div:nth-of-type(2) {
        left: rem(20);
    }
    .ball-triangle-path>div:nth-of-type(3) {
        top: rem(40);
        left: rem(40);
    }
    /*ball-scale-multiple*/
    @-webkit-keyframes ball-scale-multiple {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    @keyframes ball-scale-multiple {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    .ball-scale-multiple {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .ball-scale-multiple>div:nth-child(2) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }
    .ball-scale-multiple>div:nth-child(3) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    .ball-scale-multiple>div {
        background-color: #fff;
        border-radius: 100%;
        margin: rem(2);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute;
        left: 50%;
        top: 40%;
        opacity: 0;
        margin: 0;
        width: rem(50);
        height: rem(50);
        margin: rem(-25) 0 0 rem(-25);
        -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
        animation: ball-scale-multiple 1s 0s linear infinite;
    }
}